<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="title" flex="cross:center" v-if="dataInfo">
                <img :src="dataInfo.student.photoUrl+'?imageView2/0/w/80/format/jpeg'" class="titlePhoto"/>
                <div>
                    <div class="titleName" v-text="dataInfo.student.studentName"></div>
                    <div class="font10 opacity5" v-text="dataInfo.createTime"></div>
                </div>
            </div>
            <div class="newTitle font12" v-if="dataInfo.title" v-text="dataInfo.title"></div>
            <div class="content" v-html="dataInfo.content" v-if="dataInfo.content"></div>
            <ul class="picesList">
                <li class="picesItem" v-for="(list,index) in dataInfo.picesList">
                    <img v-lazy="list.imgUrl+'?imageView2/0/w/622/format/jpeg'" class="picesImg" v-if="list.type==1" @click="clientSwiper(dataInfo.picesList,index)"/>
                    <img v-lazy="list.imgUrl+'?vframe/jpeg/offset/1/w/750/'" class="picesImg"
                         v-if="list.type==3" @click="clientSwiper(dataInfo.picesList,index)"/>
                    <img src="../../images/play.png" class="play" v-if="list.type==3"/>
                    <div class="audioBox">
                        <audio-player :url="list.imgUrl" :time="list.time" :audioId="list.imgUrl"
                                      ref="audio" @closeAllAudio="closeAllAudio" v-if="list.type==2"></audio-player>
                    </div>
                    <share class="share" :piceIds="list.tid" :shareCode="'APP_MULTI_WORK'":imgUrl="list.type==1?list.imgUrl:list.imgUrl+'?vframe/jpeg/offset/1/w/80'" :shareUrl="shareUrl" :id="'&appId='+coreId+'&replyId='+dataInfo.tid"></share>
                </li>
            </ul>
            <div>
                <div class="setComment" flex="main:center cross:center" @click="setComment()" v-if="role!=1">我要点评</div>
                <div class="bottomCtrl">
                    <comment-list :commentObj="dataInfo" :type="'APP_MULTI_WORK'" :index="0" :classId="classId"
                                  v-if="dataInfo"  :text="'点评 '" ref="selfCommentList"></comment-list>
                </div>
                <shareModel :appName="'打卡作业'" :appCode="'APP_MULTI_WORK'" :imgUrl="dataInfo.picesList[0].type==1?dataInfo.picesList[0].imgUrl:dataInfo.picesList[0].imgUrl+'?vframe/jpeg/offset/1/w/80'" :id="'&appId='+coreId+'&replyId='+dataInfo.tid+'&day='+day" :shareUrl="shareUrl"  v-if="studentDTO"></shareModel>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    const api = new API();
    import {imagedomain} from '../../../api/api.js'
    import shareModel from '../../../components/shareModel.vue'
    import commentList from '../../../components/commentList.vue'
    import share from '../../../components/share.vue'
    import audioPlayer from '../../../components/audioComponent.vue'
    export default{
        data(){
            return {
                imagedomain: imagedomain,
                dataInfo: '',
                classId:this.$route.query.classId,
                coreId:this.$route.query.coreId,
                role:this.$route.query.role?this.$route.query.role:'',
                studentId:this.$route.query.studentId,
                day:this.$route.query.day,
                organization:'',
                shareUserName:'',
                shareUrl:'',
                studentDTO:''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction',this.$util.goBack);
            this.$nextTick(function(){
                setTimeout(()=>{
                    this.propsTitle();
                },300)
                this.getData();
            })
        },
        components: {
            shareModel,
            share,
            commentList,
            audioPlayer
        },
        methods: {
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '打卡作业',
                }, (res) => {
                })
            },
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            dataInit(){
                this.dataInfo.createTime = this.$util.getDate(this.dataInfo.createTime);
                this.dataInfo.isSlide = true;
                this.dataInfo.myself=true;
            },
            getData(){
                let params = {
                    classId: this.classId,
                    studentId:this.studentId,
                    coreId:this.coreId,
                    day:this.day,
                    role:this.role
                };
                api.getStudentMultiwork(params).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.dataInfo=rs.selfReply;
                        this.shareUrl=rs.shareUrl;
                        if(rs.object&&rs.object.organization){
                            this.organization=rs.object.organization;
                        }
                        if(rs.object&&rs.object.shareUserName){
                            this.shareUserName=rs.object.shareUserName;
                        }
                        this.studentDTO=rs.selfReply.student;
                        if(this.studentDTO.photoUrl===''){
                            this.studentDTO.photoUrl=this.$util.getDefaultHeader(this.studentDTO.studentId)
                        }
                        this.dataInit();
                        this.$nextTick(function () {
                            document.documentElement.scrollTop=1;
                            document.body.scrollTop=1;
                        });
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/studentDetail',api:'getStudentMultiwork',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/studentDetail',api:'getStudentMultiwork',success:false,data:'网络异常'}));
                })
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl =  e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl =   e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
            setComment(){
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content)
                            const param = {
                                classId: this.dataInfo.classId,
                                type: data.type,
                                appId: this.dataInfo.coreId,
                                secId: this.dataInfo.tid,
                                content: data.content,
                                appCode: 'APP_MULTI_WORK'
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let response = api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    this.$refs.selfCommentList.sonSetComment(rs)
                                }else{
                                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/studentDetail',api:'setComment',success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/studentDetail',api:'setComment',success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
        }
    }
</script>
<style scoped lang="scss">
    .audioBox{
        margin-top:0.08rem;
    }
    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .title {
        padding: 0.12rem;
        .titlePhoto {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 100%;
            margin-right: 0.12rem;
        }
        .titleName {
            font-size: 0.14rem;
        }
    }
    .newTitle{
        padding: 0.08rem 0.12rem;
    }
    .content {
        font-size: 0.13rem;
        padding: 0 0.12rem;
        margin-bottom: 0.2rem;
    }

    .picesList {
        .picesItem {
            position: relative;
            padding: 0 0.12rem;
            border-bottom: 0.12rem solid rgba(0,0,0,.16);
        }
        .picesImg {
            width: 3.51rem;
            background: #d8d8d8;
            margin-top: 0.12rem;
        }
    }

    .bottomCtrl {
        padding: 0 0.12rem;
    }

    .share {
        border: none !important;
    }

    .setComment {
        margin-top: 0.11rem;
        margin-left: 1.41rem;
        margin-bottom: 0.24rem;
        background: rgba(255, 255, 255, .16);
        border-radius: 0.06rem;
        width: 0.94rem;
        height: 0.23rem;
        font-family: PingFangSC-Medium;
        font-size: 0.11rem;
    }
</style>